<template>
  <view>
    <movable-area class="movable-area">
      <movable-view class="movable-view" :x="x" :y="y" direction="all">
        <button style="height: 104rpx; padding: 0; background-color: transparent" open-type="contact">
          <image src="https://qn.boruichengyi.com/static/index/images/kefu.png" mode="" class="kefu"></image>
        </button>
      </movable-view>
    </movable-area>
  </view>
</template>

<script>
export default {
  data() {
    return {
      x: 320, //x坐标
      y: 520 //y坐标
    };
  }
};
</script>

<style lang="scss" scoped>
$all_width: 104rpx;
$all_height: 104rpx;
button::after {
  border: none;
}
.movable-area {
  height: 100vh;
  width: 750rpx;
  top: 0;
  position: fixed;
  z-index: 200;
  pointer-events: none; //此处要加，鼠标事件可以渗透
  .movable-view {
    width: $all_width;
    height: $all_height;
    pointer-events: auto; //恢复鼠标事件
    .kefu {
      width: $all_width;
      height: $all_height;
    }
  }
}
</style>
